<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>marker轨迹回放-全局模式</title>
  </head>
  <script
    charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=X7ABZ-DDY3P-O4ID4-LZ6TE-C2BGS-FIFNM"
  ></script>
  <style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    #container {
      width: 100%;
      height: 100%;
    }
  </style>

  <body>
    <div id="container"></div>
    <script type="text/javascript">
      var center = new TMap.LatLng(30.465512, 114.40274);
      //初始化地图
      var map = new TMap.Map("container", {
        zoom: 15,
        center: center,
      });
    </script>
  </body>
</html>
<script type="text/javascript">
  var center = new TMap.LatLng(39.984104, 116.307503);
  //初始化地图
  var map = new TMap.Map("container", {
    zoom: 15,
    center: center
  });

  var path = [
    new TMap.LatLng(39.98481500648338, 116.30571126937866),
    new TMap.LatLng(39.982266575222155, 116.30596876144409),
    new TMap.LatLng(39.982348784165886, 116.3111400604248),
    new TMap.LatLng(39.978813710266024, 116.3111400604248),
    new TMap.LatLng(39.978813710266024, 116.31699800491333)
  ];

  var polylineLayer = new TMap.MultiPolyline({
    map, // 绘制到目标地图
    // 折线样式定义
    styles: {
      'style_blue': new TMap.PolylineStyle({
        'color': '#3777FF', //线填充色
        'width': 4, //折线宽度
        'borderWidth': 2, //边线宽度
        'borderColor': '#FFF', //边线颜色
        'lineCap': 'round' //线端头方式
      })
    },
    geometries: [{
      styleId: 'style_blue',
      paths: path
    }],
  });

  var marker = new TMap.MultiMarker({
    map,
    styles: {
      'car-down': new TMap.MarkerStyle({
        'width': 40,
        'height': 40,
        'anchor': {
          x: 20,
          y: 20,
        },
        'faceTo': 'map',
        'rotate': 180,
        'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
      }),
      "start": new TMap.MarkerStyle({
        "width": 25,
        "height": 35,
        "anchor": { x: 16, y: 32 },
        "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
      }),
      "end": new TMap.MarkerStyle({
        "width": 25,
        "height": 35,
        "anchor": { x: 16, y: 32 },
        "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
      })
    },
    geometries: [{
      id: 'car',
      styleId: 'car-down',
      position: new TMap.LatLng(39.98481500648338, 116.30571126937866),
    },{
      "id": 'start',
      "styleId": 'start',
      "position": new TMap.LatLng(39.98481500648338, 116.30571126937866)
    }, {
      "id": 'end',
      "styleId": 'end',
      "position": new TMap.LatLng(39.978813710266024, 116.31699800491333)
    }]
  });
  marker.moveAlong({  
    'car': {
      path,
      speed: 250
    }
  }, {
    autoRotation:true
  })
</script>
